<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas-demos</title>

    <style>
        canvas {
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>

<body>
<canvas id="cont" width="500px" height="500px">浏览器不支持</canvas>
<!--只能使用原生的js,如果让canvas左右居中使用display:block-->
<script>
    // 固定start获取画布
    const canvas = document.querySelector('#cont')
    // 获取画布上下文
    const ctx = canvas.getContext('2d')
    // 固定end

    const DEG = Math.PI * 2 / 360
    let count = 0
    ctx.lineWidth = 4
    ctx.strokeStyle = 'red'
    // 每10ms走一度
    /*    const timer = setInterval(
            function () {
                count++
                ctx.beginPath()
                // 这种算法存在重复绘制的问题需要改进
                ctx.arc(250, 250, 200, -Math.PI / 2, count * DEG - Math.PI / 2, false)
                ctx.stroke()
                if (count === 360) {
                    clearInterval(timer)
                }
            }, 10)*/


    // 改造后每10ms走一度
    const timer2 = setInterval(
        function () {
            count++
            ctx.beginPath()
            // 这种算法存在重复绘画的问题需要改进
            ctx.arc(250, 250, 200, (count - 1) * DEG - Math.PI / 2, count * DEG - Math.PI / 2, false)
            ctx.stroke()
            if (count === 360) {
                clearInterval(timer2)
            }
        }, 10)

</script>
</body>
</html>
